<template>
  <div class="container">
    <el-card class="box-card">
      <div class="text item">
        <el-button type="success" class="new-btn" @click="toNewQuestions" size="small"
          ><i class="el-icon-edit"></i> 新增试题</el-button
        >
      </div>
      <!-- 表单区域 -->
      <el-form
        ref="formRef"
        :model="pig"
        label-width="80px"
        :inline="true"
        :rules="rules"
      >
        <el-form-item label="学科" prop="subject">
          <el-select
            v-model="pig.subjectID"
            placeholder="请选择"
            @change="getDirectorysList($event)"
          >
            <el-option
              v-for="item in form.subjectList"
              :key="item.id"
              :value="item.id"
              :label="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="pig.catalogID" placeholder="请选择"
           >
            <el-option
              v-for="item in form.directoryList"
              :key="item.id"
              :value="item.id"
              :label="item.directoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="pig.tags" placeholder="请选择">
            <el-option
              v-for="item in form.tagsList"
              :key="item.id"
              :value="item.tagName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="pig.keyword"></el-input>
        </el-form-item>
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="pig.questionType" placeholder="请选择">
            <el-option
              v-for="item in questionType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="pig.difficulty" placeholder="请选择">
            <el-option
              v-for="item in form.difficultyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="pig.direction" placeholder="请选择">
            <el-option
               v-for="item in form.directionList"
              :key="item.id"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="pig.creatorID" placeholder="请选择">
            <el-option
              v-for="item in form.creatorList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="pig.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="pig.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="pig.province" placeholder="请选择" class="city"
          @change="getCitysList($event)">
            <el-option
               v-for="item in form.provincesList"
                :key="item.id"
                :value="item"
            >
            </el-option>
          </el-select>
          <el-select v-model="pig.city" placeholder="请选择" class="city">
            <el-option
              v-for="item in form.citysList"
                :key="item.id"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-btn">
          <div class="form-btn-big">
          <el-button @click="resetForm" class="form-btn-btn" size="mini">清除</el-button>
          <el-button type="primary" @click="submitForm" class="form-btn-btn"  size="mini"
            >筛选</el-button
          >
          </div>
        </el-form-item>
      </el-form>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert
          :title="dataList"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 10px"
        >
        </el-alert>
        <el-tab-pane label="全部" name="">
        </el-tab-pane>
        <el-tab-pane label="待审核" name="">
        </el-tab-pane>
        <el-tab-pane label="已审核" name="">
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="">
        </el-tab-pane>
        <el-table :data="newTableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-if="scope.questionType= 1">单选</span>
                <span v-else-if="scope.questionType= 2">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                {{ scope.row.question | html2Text(scope.row.question) }}
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                {{
                  scope.row.addDate
                    | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
                }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template slot-scope="scope">
                <span v-if="scope.difficulty= 1">简单</span>
                <span v-else-if="scope.difficulty= 2">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.chkState= 1">通过</span>
                <span v-else-if="scope.chkState= 2">待审核</span>
                <span v-else>拒绝</span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.publishState= 1">待发布</span>
                <span v-else-if="scope.publishState= 2">已发布</span>
                <span v-else>已下架</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewSubject(scope.row)"
                  >预览</el-button
                >
                <el-button type="text" size="small" @click="previewChkState(scope.row)" :disabled="scope.row.chkState === 1 ? true : false">审核</el-button>
                <el-button type="text" size="small" @click="toNewQuestionsID(scope.row.id)">修改</el-button>
                <el-button type="text" size="small" @click="previewPublishState(scope.row)">{{scope.row.publishState == 1 ? "上架" : "下架"}}</el-button>
                <el-button type="text" size="small" @click="previewDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-tabs>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="topList.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="5"
          :total="totalList"
          layout="total, sizes, prev, pager, next, jumper"
          background
        >
        </el-pagination>
      </div>
      <!-- 弹出层区域 -->
      <el-dialog title="题目预览" :visible.sync="dialogTableVisible" @close="dialogTableVisible = false">
      <el-row style="margin-bottom:15px">
  <el-col :span="6">【题型】:{{previewSubject2.questionType}}</el-col>
  <el-col :span="6">【编号】:{{previewSubject2.number}}</el-col>
  <el-col :span="6">【难度】:{{previewSubject2.difficulty}}</el-col>
  <el-col :span="6">【标签】:{{previewSubject2.tags}}</el-col>
</el-row>
<el-row style="margin-bottom:15px">
  <el-col :span="6">【学科】:{{previewSubject2.subject}}</el-col>
  <el-col :span="6">【目录】:{{previewSubject2.catalog}}</el-col>
  <el-col :span="6">【方向】:{{previewSubject2.direction}}</el-col>
</el-row>
<div class="grayBigHr"></div>
<el-row style="margin-bottom:15px">
  <el-col :span="24" style="margin:15px 0">【题干】:{{previewSubject2.question | html2Text(previewSubject2.question)}}</el-col>
  <el-col :span="24" style="margin-bottom:15px"></el-col>
  <el-col :span="24" style="margin-bottom:15px">选项:(以下选中的项为正确答案)</el-col>
  <el-col :span="24" style="margin-bottom:15px"><input type="radio" name="answer"> 1</el-col>
  <el-col :span="24" style="margin-bottom:15px"><input type="radio" name="answer"> 2</el-col>
  <el-col :span="24" style="margin-bottom:15px"><input type="radio" name="answer"> 3</el-col>
  <el-col :span="24" style="margin-bottom:15px"><input type="radio" name="answer"> 4</el-col>
</el-row>
<div class="grayBigHr"></div>
<el-row style="margin:15px 0">
  <el-col :span="24">【参考答案】:{{previewSubject2.answer | html2Text(previewSubject2.answer)}}</el-col>
</el-row>
<div class="grayBigHr"></div>
<el-row style="margin:15px 0">
  <el-col :span="24">【答案解析】: 无</el-col>
</el-row>
<div class="grayBigHr"></div>
<el-row style="margin:15px 0">
  <el-col :span="24">【题目备注】: 无</el-col>
</el-row>
</el-dialog>
<!-- 审核弹窗 -->
<el-dialog
  title="题目审核"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-radio v-model="radio" label="1">通过</el-radio>
  <el-radio v-model="radio" label="2">拒绝</el-radio>
  <el-input
  style="margin-top: 15px"
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入审核意见"
  v-model="textarea2">
</el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="chkStateAdopt">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>

<script>
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js' // 引入题型和难度数组
// 获取学科列表
import { list as getSubjects } from '@/api/hmmm/subjects.js'
// 获取目录列表
import { list as getDirectorys } from '@/api/hmmm/directorys.js'
// 获取企业列表
import { list as getCompanys } from '@/api/hmmm/companys.js'
// 获取城市列表
import { provinces as getProvinces, citys as getCitys } from '@/api/hmmm/citys.js'
// 获取标签列表
import { list as getTags } from '@/api/hmmm/tags.js'
// 获取用户列表
import { list as getUser } from '@/api/base/users'

export default {
  name: 'BBBB',
  data () {
    return {
      form: {
        subjectList: {},
        directoryList: [],
        companyList: {},
        provincesList: [],
        citysList: [],
        tagsList: [],
        directionList: direction,
        questionTypeList: questionType,
        difficultyList: difficulty,
        creatorList: ''
      },
      pig: {
        difficulty: null,
        direction: null,
        subjectID: null,
        catalogID: null,
        tags: null,
        questionType: null,
        creatorID: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null
      },
      activeName: '',
      topList: [],
      bottomList: [],
      dataList: '',
      totalList: 0,
      value: '',
      catalogID: '',
      questionType, // 题型
      difficulty, // 难度
      rules: {
        subject: [],
        difficulty: [],
        direction: [],
        catalogID: [],
        tag: [],
        types: [],
        creator: [],
        province: [],
        city: [],
        keyword: [],
        remarks: []
      },
      dialogTableVisible: false,
      dialogVisible: false,
      previewSubject2: [],
      radio: '1',
      textarea2: '',
      getPreviewChkState: '',
      choiceCheck,
      noReviewed: [],
      passedList: [],
      rejectedList: [],
      remove

      // demoObj: []
    }
  },
  created () {
    this.initList()
    this.getList()
  },
  methods: {
    // 获取精选题库列表
    async getList (obj) {
      const { data } = await choice(obj)
      console.log(data)
      this.topList = data
      this.bottomList = data.items
      this.dataListLength()
    },
    // 初始化筛选区
    initList () {
      this.getSubjectsList()
      this.getCompanysList()
      this.getProvincesList()
      this.getUserList()
    },
    // 获取学科列表
    async getSubjectsList () {
      const { data } = await getSubjects({ pagesize: 20 })
      // console.log(data.items)
      this.form.subjectList = data.items
    },
    // 获取目录列表
    async getDirectorysList (e) {
      const { data } = await getDirectorys({ subjectID: e, pagesize: 20 })
      // console.log(data)
      this.form.directoryList = data.items
      this.getTagsList(e)
    },
    // 获取企业列表
    async getCompanysList () {
      const { data } = await getCompanys({ pagesize: 20 })
      // console.log(data)
      this.form.companyList = data.items
    },
    // 获取城市列表
    getProvincesList () {
      const data = getProvinces()
      //   console.log(data)
      this.form.provincesList = data
    },
    // 获取城区列表
    getCitysList (e) {
      this.pig.city = ''
      const data = getCitys(e)
      // console.log(data)
      this.form.citysList = data
    },
    // 获取标签列表
    async getTagsList (e) {
      const { data } = await getTags({ subjectID: e, pagesize: 20 })
      // console.log(data.items)
      this.form.tagsList = data.items
    },
    // 获取录入人列表
    async getUserList () {
      const { data } = await getUser()
      console.log(data.list)
      this.form.creatorList = data.list
    },
    onSubmit () {
      console.log('submit!')
    },
    async  handleClick (tab, event) {
      console.log(tab.index)
    },
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.topList.pagesize = val
      const { data } = await choice({ pagesize: this.topList.pagesize, page: this.topList.page })
      this.bottomList = data.items
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.topList.page = val
      const { data } = await choice({ pagesize: this.topList.pagesize, page: this.topList.page })
      this.bottomList = data.items
    },

    dataListLength () {
      const res = this.topList.counts
      this.totalList = res
      // console.log(res)
      const data = this.bottomList.length.toString()
      this.dataList = ('数据共' + data + '条')
    },
    submitForm () {
      console.log(this.pig)

      this.getList(this.pig)
    },
    resetForm () {
      this.$refs.formRef.resetFields()
      // console.log(this.$refs.formRef)
      console.log(this.difficultyList)
    },

    // 弹窗
    previewSubject (row) {
      this.previewSubject2 = row
      this.dialogTableVisible = true
    },
    // 审核
    async previewChkState (row) {
      console.log(row)
      // const { data } = await choice({ publishState: row.items.PublishState })
      // this.bottomList = data.items
      this.dialogVisible = true
      this.getPreviewChkState = row
    },
    async chkStateAdopt () {
      const { res } = await choiceCheck({ id: this.getPreviewChkState.id, chkState: 1, chkRemarks: '1' })
      console.log(res)
      const { data } = await choice()
      this.bottomList = data.items
      this.dialogVisible = false
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    previewPublishState (row) {
      // console.log(row)
      this.$confirm('您确定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row)
        await choicePublish({ id: row.id, publishState: row.publishState })
        const { data } = await choice()
        this.bottomList = data.items
        this.$message({
          type: 'success',
          message: '成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    previewDelete (row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          console.log(row.id)
          await remove({
            id: row.id
          })
          this.getList()
        } catch (error) {
          console.log('-------------------------')
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    toNewQuestions () {
      this.$router.push('/questions/new/:id')
    },
    toNewQuestionsID (id) {
      // console.log(id)
      this.$router.push('/questions/new/' + id)
    }
  },
  computed: {
    // items: function () {
    //   var i = this.$refs.formRef.model
    //   i.subjectID = this.pig.subject
    //   return i
    // },
    newTableData () {
      let data = []
      if (this.activeName === '0') {
      // 全部
        data = this.bottomList
      } else if (this.activeName === '1') {
      // 待审核
        data = this.bottomList.filter(t => t.chkState === 0)
        console.log(data)
      } else if (this.activeName === '2') {
      // 通过
        data = this.bottomList.filter(t => t.chkState === 1)
      } else {
      // 拒绝
        data = this.bottomList.filter(t => t.chkState === 2)
      }
      return data
    }
  }
}
</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  position: relative;
  margin: 0 auto;
  width: 98%;
}
.new-btn {
  position: absolute;
  right: 15px;
  top: 15px;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form--inline .el-form-item {
  display: flex;
  flex: 25%;
}
.el-form--inline .el-form-item {
  margin-right: 0px;
}
.el-input__inner {
  padding: 0 30px;
}
.el-form-item__content {
  flex: 1;
}
.el-pagination {
  float: right;
  margin: 20px 0;
}
.grayBigHr {
  height: 3px;
  width: 95%;
  background-color:#d5d5d5;
}
/deep/.el-form--inline .el-form-item__content {
  width: 50%
}
/deep/.city {
  width: 50%!important
}
/deep/ .form-btn-floatform-btn-float{
  width: 100%!important
}
/deep/.form-btn-btn {
  margin-right: 10px
}
/deep/.form-btn-big {
  width: 145px;
  float: right;
}
</style>
